import { Radio, Switch } from '@kedacom/react-next'
import { useEffect, useRef } from 'react'
import LabelWrap from '../../components/LabelWrap'
import { useMeetingVmpStore } from './store'
import shallow from 'zustand/shallow'
import VmpPlan from './VmpPlan'
import FontSetting, { FontSettingRef } from './FontSetting'
import { useMeetingParamsStore } from '../meetingParams/store'
import VmpPoll from './VmpPoll'
import { StyledWrap } from './style'
import { changeEnable, changeMode, getVmpParam } from './store.combine'
import { useBasicInfoStore } from '../basicInfo/store'
import VmpView from './VmpView'
import { ViewRef } from './VmpView/interface'
import { t } from 'i18next'
import { PlanRef } from './VmpPlan/interface'
import { PollRef } from './VmpPoll/interface'
import { useGlobalStore } from '@/store/global'
import { useCreateContentStore } from '../../store'
export default function MeetingVmp() {
	const {
		enable,
		update,
		mode,
		voice_hint,
		show_mt_name,
		broadcast,
		except_self,
		layout,
		mt_name_style,
		enable_custom,
		_meetingType,
		checkVmpPollData,
	} = useMeetingVmpStore(
		(state) => ({
			enable: state.enable,
			mode: state.mode,
			broadcast: state.broadcast,
			update: state.update,
			voice_hint: state.voice_hint,
			show_mt_name: state.show_mt_name,
			except_self: state.except_self,
			layout: state.layout,
			mt_name_style: state.mt_name_style,
			enable_custom: state.enable_custom,
			_meetingType: state._meetingType,
			checkVmpPollData: state.checkVmpPollData,
		}),
		shallow
	)
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const meetingType = useMeetingParamsStore((state) => state.meetingType)
	const repeat = useBasicInfoStore((state) => state.repeat)
	const _container = useCreateContentStore((state) => state._container)
	/**轮询的ref */
	const planRef = useRef<PlanRef | null>(null)
	/**轮询的ref */
	const pollRef = useRef<PollRef | null>(null)
	/**视图ref*/
	const viewRef = useRef<ViewRef | null>(null)
	/**字体*/
	const fontSettingRef = useRef<FontSettingRef | null>(null)

	return (
		<StyledWrap>
			{meetingType !== 2 && (
				<LabelWrap label={t('会议画面合成')} className="line_wrap_vmp">
					<Switch
						width={40}
						height={22}
						checked={enable}
						onChange={(e, v) => {
							changeEnable(v)
						}}
					></Switch>
				</LabelWrap>
			)}
			{meetingType === 2 && (
				<LabelWrap label={t('定制画面合成')} className="line_wrap_vmp">
					<Switch
						width={40}
						height={22}
						checked={enable_custom}
						onChange={(e, v) => {
							update({ enable_custom: v })
						}}
					></Switch>
				</LabelWrap>
			)}
			{!repeat && (
				<LabelWrap label={t('合成预案')} className="line_wrap_vmp">
					<VmpPlan
						getVmpParam={() => {
							if (mode === 4) {
								let flag = checkVmpPollData()
								if (flag) {
									return getVmpParam('plan')
								} else {
									return null
								}
							} else {
								return getVmpParam('plan')
							}
						}}
						ref={planRef}
					></VmpPlan>
				</LabelWrap>
			)}
			{meetingType === 0 && (
				<LabelWrap label={t('广播')} className="line_wrap_vmp">
					<Switch
						width={40}
						height={22}
						checked={!!broadcast}
						onChange={(e, v) => {
							update({ broadcast: v ? 1 : 0 })
						}}
					></Switch>
				</LabelWrap>
			)}
			<LabelWrap label={t('识别声音来源')} className="line_wrap_vmp">
				<Switch
					width={40}
					height={22}
					checked={!!voice_hint}
					onChange={(e, v) => {
						update({ voice_hint: v ? 1 : 0 })
					}}
				></Switch>
			</LabelWrap>
			{(meetingType === 1 || meetingType === 0) && (
				<LabelWrap label={t('显示终端名称')} className="line_wrap_vmp">
					<Switch
						width={40}
						height={22}
						className="video"
						checked={!!show_mt_name}
						onChange={(e, v) => {
							update({ show_mt_name: v ? 1 : 0 })
						}}
						style={{ margin: '0 20px 0 0' }}
					></Switch>
					<FontSetting
						disabled={false}
						container={_container}
						ref={fontSettingRef}
						size={mt_name_style?.font_size}
						position={mt_name_style?.position}
						fontColor={mt_name_style?.font_color}
						showText={mode === 1}
						changeCb={(type, val) => {
							//恢复数据时store中数据不变化不会触发useEffect,因此需要实时更新store中数据
							let _data = { ...mt_name_style }
							switch (type) {
								case 'size':
									_data.font_size = val
									break
								case 'position':
									_data.position = val
									break
								case 'color':
									_data.font_color = val
									break
							}
							update({ mt_name_style: _data })
						}}
					></FontSetting>
				</LabelWrap>
			)}
			{(meetingType === 1 || meetingType === 0) && (
				<LabelWrap label={t('合成模式')} className="line_wrap_vmp">
					<Radio
						checked={mode === 2}
						onChange={(e, v) => {
							changeMode(2)
						}}
						width={180}
					>
						{t('自动画面合成')}
					</Radio>
					<Radio
						checked={mode === 1}
						onChange={(e, v) => {
							changeMode(1)
						}}
						width={180}
					>
						{t('定制画面合成')}
					</Radio>
					<Radio
						checked={mode === 4}
						onChange={(e, v) => {
							changeMode(4)
						}}
						width={180}
					>
						{t('批量轮询')}
					</Radio>
				</LabelWrap>
			)}
			{meetingType === 1 && mode === 2 && !!SWITCH.vmp.exceptSelf && (
				<LabelWrap label={t('不看自己')} className="line_wrap_vmp">
					<Switch
						width={40}
						height={22}
						checked={!!except_self}
						onChange={(e, v) => {
							update({ except_self: v ? 1 : 0 })
						}}
						style={{ margin: '0 20px 0 0' }}
					></Switch>
				</LabelWrap>
			)}
			{(mode === 1 || mode === 4) && (
				<VmpView
					container={_container}
					ref={viewRef}
					layout={layout}
					disabled={false}
					isBoxDisabled={false}
					noAddIcon={false}
					mode={mode}
				/>
			)}
			{mode === 4 && <VmpPoll ref={pollRef}></VmpPoll>}
		</StyledWrap>
	)
}
